<template>
  <el-drawer
    :wrapper-closable="false"
    title="关联角色"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col p-[16px] pt-0">
      <div class="common-secondary-bg">
        <div class="common-secondary-title"></div>
        角色权限
      </div>
      <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
        <div class="bg-gray-50 p-[16px]">
          <el-checkbox v-model="checkRolesAll" :indeterminate="isRolesIndeterminate" @change="handleCheckAllRolesChange"
            ><span class="font-bold text-[#363F51]">全选</span>
          </el-checkbox>
          <el-checkbox-group v-model="checkedRoles" class="flex flex-col" @change="handleCheckedRolesChange">
            <el-checkbox v-for="(item, index) in roles" :key="index" :label="item.code" class="mt-[16px]">{{
              item.name
            }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "./config";
import vModelMixin from "@/mixin/v-model";
import { systemRoleAll } from "@/api/role";
import { systemUserAssignRole } from "@/api/user";

export default {
  name: "RolePermissions",
  components: {},
  mixins: [vModelMixin],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
    multipleSelection: {
      type: Array,
      default: () => [],
    },
    nodeId: {
      type: [String, Number],
      default: null,
    },
    parentId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      ...config,
      isRolesIndeterminate: false,
      checkRolesAll: false,
      checkedRoles: [],
      roles: ["角色A", "角色B", "角色C", "角色D", "角色E"],
    };
  },
  computed: {},
  methods: {
    async onDrawerOpen() {
      //调用接口
      this.checkedRoles = [];
      const params = {
        tenantId: this.nodeId,
      };
      this.roles = await systemRoleAll(params);
    },
    handleCheckAllRolesChange(val) {
      this.checkedRoles = val ? this.roles.map((item) => item.code) : [];

      this.isRolesIndeterminate = false;
    },
    handleCheckedRolesChange(value) {
      const checkedRolesCount = value.length;
      this.checkRolesAll = checkedRolesCount === this.roles.length;
      this.isRolesIndeterminate = checkedRolesCount > 0 && checkedRolesCount < this.roles.length;
    },
    async onSubmit() {
      //发送事件
      const params = {
        departId: this.parentId ? this.parentId : this.nodeId,
        username: this.multipleSelection.map((item) => item.username),
        roleCode: this.checkedRoles,
      };
      const data = await systemUserAssignRole(params);
      this.$emit("onSubmitRole");
    },
    onDrawerClosed() {},
  },
};
</script>

<style lang="scss" scoped></style>
